import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { toast } from 'sonner';
import { useTheme } from '@/hooks/useTheme';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { cn } from '@/lib/utils';

// 订单状态类型
type OrderStatus = 'all' | 'pending' | 'paid' | 'shipped' | 'delivered' | 'cancelled';

// 订单项接口
interface OrderItem {
  id: string;
  productId: string;
  title: string;
  price: number;
  quantity: number;
}

// 订单接口
interface Order {
  id: string;
  orderNumber: string;
  items: OrderItem[];
  totalAmount: number;
  status: 'pending' | 'paid' | 'shipped' | 'delivered' | 'cancelled';
  createdAt: string;
  paymentMethod: string;
  shippingAddress: string;
  buyer: {
    id: string;
    username: string;
    phone: string;
  };
  seller: {
    id: string;
    username: string;
  };
}

// 销售统计数据
const salesChartData = [
  { name: '周一', 销售额: 2400, 订单数: 40 },
  { name: '周二', 销售额: 1398, 订单数: 27 },
  { name: '周三', 销售额: 9800, 订单数: 158 },
  { name: '周四', 销售额: 3908, 订单数: 78 },
  { name: '周五', 销售额: 4800, 订单数: 85 },
  { name: '周六', 销售额: 3800, 订单数: 67 },
  { name: '周日', 销售额: 4300, 订单数: 76 },
];

// 模拟订单数据
const mockOrders: Order[] = [
  {
    id: '1',
    orderNumber: '202310300001',
    items: [
      {
        id: 'item-1',
        productId: '1',
        title: '九成新 MacBook Pro 2023',
        price: 8999,
        quantity: 1
      }
    ],
    totalAmount: 8999,
    status: 'paid',
    createdAt: '2023-10-30 10:30:00',
    paymentMethod: '微信支付',
    shippingAddress: '主校区学生公寓A栋501室',
    buyer: {
      id: '1',
      username: 'student1',
      phone: '138****1234'
    },
    seller: {
      id: '3',
      username: 'merchant1'
    }
  },
  {
    id: '2',
    orderNumber: '202310290002',
    items: [
      {
        id: 'item-2',
        productId: '2',
        title: '大学英语四级词汇书',
        price: 25,
        quantity: 2
      },
      {
        id: 'item-3',
        productId: '5',
        title: '考研政治复习资料全套',
        price: 120,
        quantity: 1
      }
    ],
    totalAmount: 170,
    status: 'delivered',
    createdAt: '2023-10-29 15:45:00',
    paymentMethod: '支付宝',
    shippingAddress: '东校区图书馆3楼自习室',
    buyer: {
      id: '4',
      username: 'student2',
      phone: '136****3456'
    },
    seller: {
      id: '5',
      username: 'student3'
    }
  },
  {
    id: '3',
    orderNumber: '202310280003',
    items: [
      {
        id: 'item-4',
        productId: '4',
        title: '篮球装备套装',
        price: 199,
        quantity: 1
      }
    ],
    totalAmount: 199,
    status: 'pending',
    createdAt: '2023-10-28 09:15:00',
    paymentMethod: '未支付',
    shippingAddress: '南校区体育馆',
    buyer: {
      id: '5',
      username: 'student3',
      phone: '135****7890'
    },
    seller: {
      id: '6',
      username: 'merchant2'
    }
  },
  {
    id: '4',
    orderNumber: '202310270004',
    items: [
      {
        id: 'item-5',
        productId: '6',
        title: '小型咖啡机',
        price: 350,
        quantity: 1
      }
    ],
    totalAmount: 350,
    status: 'shipped',
    createdAt: '2023-10-27 14:20:00',
    paymentMethod: '微信支付',
    shippingAddress: '西校区学生公寓B栋302室',
    buyer: {
      id: '1',
      username: 'student1',
      phone: '138****1234'
    },
    seller: {
      id: '6',
      username: 'merchant2'
    }
  },
  {
    id: '5',
    orderNumber: '202310260005',
    items: [
      {
        id: 'item-6',
        productId: '3',
        title: '专业相机 Canon EOS R5',
        price: 13500,
        quantity: 1
      }
    ],
    totalAmount: 13500,
    status: 'cancelled',
    createdAt: '2023-10-26 16:30:00',
    paymentMethod: '支付宝',
    shippingAddress: '北校区摄影社团',
    buyer: {
      id: '4',
      username: 'student2',
      phone: '136****3456'
    },
    seller: {
      id: '3',
      username: 'merchant1'
    }
  }
];

export default function Orders() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [filteredOrders, setFilteredOrders] = useState<Order[]>([]);
  const [selectedStatus, setSelectedStatus] = useState<OrderStatus>('all');
  const [searchQuery, setSearchQuery] = useState('');
  const [dateRange, setDateRange] = useState('all');
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage] = useState(10);
  const [isLoading, setIsLoading] = useState(true);
  const { theme } = useTheme();

  // 加载订单数据
  useEffect(() => {
    // 模拟API请求
    setTimeout(() => {
      setOrders(mockOrders);
      setFilteredOrders(mockOrders);
      setIsLoading(false);
    }, 1000);
  }, []);

  // 筛选订单
  useEffect(() => {
    let filtered = [...orders];
    
    // 按状态筛选
    if (selectedStatus !== 'all') {
      filtered = filtered.filter(order => order.status === selectedStatus);
    }
    
    // 按搜索关键词筛选
    if (searchQuery) {
      const query = searchQuery.toLowerCase();
      filtered = filtered.filter(order => 
        order.orderNumber.includes(query) || 
        order.buyer.username.toLowerCase().includes(query) ||
        order.seller.username.toLowerCase().includes(query) ||
        order.items.some(item => item.title.toLowerCase().includes(query))
      );
    }
    
    // 按日期范围筛选 (简化实现)
    if (dateRange !== 'all') {
      const now = new Date();
      let startDate = new Date();
      
      switch (dateRange) {
        case 'today':
          startDate.setHours(0, 0, 0, 0);
          break;
        case 'week':
          startDate.setDate(now.getDate() - 7);
          break;
        case 'month':
          startDate.setMonth(now.getMonth() - 1);
          break;
        default:
          break;
      }
      
      filtered = filtered.filter(order => {
        const orderDate = new Date(order.createdAt);
        return orderDate >= startDate;
      });
    }
    
    setFilteredOrders(filtered);
    setCurrentPage(1); // 重置到第一页
  }, [selectedStatus, searchQuery, dateRange, orders]);

  // 计算分页
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = filteredOrders.slice(indexOfFirstItem, indexOfLastItem);
  const totalPages = Math.ceil(filteredOrders.length / itemsPerPage);

  // 更新订单状态
  const updateOrderStatus = (orderId: string, newStatus: 'paid' | 'shipped' | 'delivered' | 'cancelled') => {
    const updatedOrders = orders.map(order => 
      order.id === orderId ? { ...order, status: newStatus } : order
    );
    setOrders(updatedOrders);
    
    const statusText = {
      'paid': '已支付',
      'shipped': '已发货',
      'delivered': '已完成',
      'cancelled': '已取消'
    };
    
    toast.success(`订单状态已更新为${statusText[newStatus]}`);
  };

  // 状态样式映射
  const statusStyles = {
    'pending': { text: '待支付', className: 'px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300' },
    'paid': { text: '已支付', className: 'px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300' },
    'shipped': { text: '已发货', className: 'px-2 py-1 text-xs font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300' },
    'delivered': { text: '已完成', className: 'px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300' },
    'cancelled': { text: '已取消', className: 'px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300' }
  };

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500"></div>
          <p className="mt-4 text-gray-600 dark:text-gray-400">加载中...</p>
        </div>
      </div>
    );
  }

  // 计算订单统计数据
  const totalOrders = orders.length;
  const totalRevenue = orders.reduce((sum, order) => sum + order.totalAmount, 0);
  const pendingOrders = orders.filter(order => order.status === 'pending').length;
  const completedOrders = orders.filter(order => order.status === 'delivered').length;

  return (
    <div className={cn("min-h-screen bg-gray-50 dark:bg-gray-900")}>
      {/* 顶部导航 */}
      <header className="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <Link to="/admin" className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 mr-4">
                <i className="fa-solid fa-arrow-left"></i>
              </Link>
              <h1 className="text-xl font-bold text-gray-900 dark:text-white">订单管理</h1>
            </div>
            
            <div className="flex items-center">
              <span className="text-sm text-gray-600 dark:text-gray-400 mr-4">欢迎，管理员</span>
              <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                <i className="fa-solid fa-user-shield text-gray-600 dark:text-gray-300"></i>
              </div>
            </div>
          </div>
        </div>
      </header>
      
      {/* 主体内容 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* 订单统计卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">总订单数</p>
                <h3 className="text-2xl font-bold text-gray-900 dark:text-white mt-1">{totalOrders}</h3>
              </div>
              <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
                <i className="fa-solid fa-shopping-cart text-blue-600 dark:text-blue-400 text-xl"></i>
              </div>
            </div>
          </div>
          
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">总销售额</p>
                <h3 className="text-2xl font-bold text-gray-900 dark:text-white mt-1">¥{totalRevenue.toLocaleString()}</h3>
              </div>
              <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
                <i className="fa-solid fa-chart-line text-green-600 dark:text-green-400 text-xl"></i>
              </div>
            </div>
          </div>
          
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">待处理订单</p>
                <h3 className="text-2xl font-bold text-gray-900 dark:text-white mt-1">{pendingOrders}</h3>
              </div>
              <div className="w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center">
                <i className="fa-solid fa-clock text-yellow-600 dark:text-yellow-400 text-xl"></i>
              </div>
            </div>
          </div>
          
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">已完成订单</p>
                <h3 className="text-2xl font-bold text-gray-900 dark:text-white mt-1">{completedOrders}</h3>
              </div>
              <div className="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
                <i className="fa-solid fa-check-circle text-purple-600 dark:text-purple-400 text-xl"></i>
              </div>
            </div>
          </div>
        </div>
        
        {/* 销售趋势图 */}
        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 mb-8 border border-gray-200 dark:border-gray-700">
          <div className="flex justify-between items-center mb-6">
            <h3 className="text-lg font-bold text-gray-900 dark:text-white">销售趋势 (最近7天)</h3>
            <button className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
              <i className="fa-solid fa-download"></i>
            </button>
          </div>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={salesChartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" stroke={theme === 'dark' ? '#374151' : '#e5e7eb'} />
                <XAxis dataKey="name" stroke={theme === 'dark' ? '#9ca3af' : '#6b7280'} />
                <YAxis stroke={theme === 'dark' ? '#9ca3af' : '#6b7280'} />
                <Tooltip 
                  contentStyle={{ 
                    backgroundColor: theme === 'dark' ? '#1f2937' : '#ffffff',
                    borderColor: theme === 'dark' ? '#374151' : '#e5e7eb',
                    color: theme === 'dark' ? '#f9fafb' : '#111827'
                  }}
                />
                <Legend />
                <Bar dataKey="销售额" fill="#8884d8" />
                <Bar dataKey="订单数" fill="#82ca9d" />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
        
        {/* 筛选和搜索 */}
        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 mb-6">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <i className="fa-solid fa-search text-gray-400"></i>
                </div>
                <input
                  type="text"
                  placeholder="搜索订单号、买家或商品名称..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                />
              </div>
            </div>
            
            <div className="flex gap-4">
              <select
                value={dateRange}
                onChange={(e) => setDateRange(e.target.value)}
                className="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
              >
                <option value="all">全部时间</option>
                <option value="today">今天</option>
                <option value="week">近7天</option>
                <option value="month">近30天</option>
              </select>
              
              <select
                value={selectedStatus}
                onChange={(e) => setSelectedStatus(e.target.value as OrderStatus)}
                className="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
              >
                <option value="all">全部状态</option>
                <option value="pending">待支付</option>
                <option value="paid">已支付</option>
                <option value="shipped">已发货</option>
                <option value="delivered">已完成</option>
                <option value="cancelled">已取消</option>
              </select>
            </div>
          </div>
        </div>
        
        {/* 订单列表 */}
        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm overflow-hidden border border-gray-200 dark:border-gray-700">
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
              <thead className="bg-gray-50 dark:bg-gray-750">
                <tr>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    订单编号
                  </th>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    买家信息
                  </th>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    卖家信息
                  </th>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    商品信息
                  </th>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    总金额
                  </th>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    支付方式
                  </th>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    下单时间
                  </th>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    状态
                  </th>
                  <th scope="col" className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    操作
                  </th>
                </tr>
              </thead>
              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                {currentItems.map((order) => (
                  <tr key={order.id} className="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors">
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm text-gray-900 dark:text-gray-100 font-medium">{order.orderNumber}</div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm text-gray-900 dark:text-gray-100">{order.buyer.username}</div>
                      <div className="text-xs text-gray-500 dark:text-gray-400">{order.buyer.phone}</div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm text-gray-900 dark:text-gray-100">{order.seller.username}</div>
                    </td>
                    <td className="px-6 py-4">
                      <div className="text-sm text-gray-900 dark:text-gray-100 line-clamp-2">
                        {order.items.map(item => item.title).join('、')}
                        {order.items.length > 1 && ` (等${order.items.length}件商品)`}
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm font-medium text-gray-900 dark:text-gray-100">¥{order.totalAmount}</div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm text-gray-900 dark:text-gray-100">{order.paymentMethod}</div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                      {order.createdAt}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={statusStyles[order.status].className}>
                        {statusStyles[order.status].text}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <div className="flex justify-end space-x-2">
                        <button
                          className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300"
                        >
                          <i className="fa-solid fa-eye mr-1"></i>查看
                        </button>
                        
                        {order.status === 'pending' && (
                          <>
                            <button
                              onClick={() => updateOrderStatus(order.id, 'paid')}
                              className="text-green-600 dark:text-green-400 hover:text-green-500 dark:hover:text-green-300"
                            >
                              <i className="fa-solid fa-check mr-1"></i>标记为已支付
                            </button>
                            <button
                              onClick={() => updateOrderStatus(order.id, 'cancelled')}
                              className="text-red-600 dark:text-red-400 hover:text-red-500 dark:hover:text-red-300"
                            >
                              <i className="fa-solid fa-times mr-1"></i>取消订单
                            </button>
                          </>
                        )}
                        
                        {order.status === 'paid' && (
                          <button
                            onClick={() => updateOrderStatus(order.id, 'shipped')}
                            className="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300"
                          >
                            <i className="fa-solid fa-truck mr-1"></i>标记为已发货
                          </button>
                        )}
                        
                        {order.status === 'shipped' && (
                          <button
                            onClick={() => updateOrderStatus(order.id, 'delivered')}
                            className="text-purple-600 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300"
                          >
                            <i className="fa-solid fa-check-circle mr-1"></i>标记为已完成
                          </button>
                        )}
                        
                        {(order.status === 'paid' || order.status === 'shipped') && (
                          <button
                            onClick={() => updateOrderStatus(order.id, 'cancelled')}
                            className="text-red-600 dark:text-red-400 hover:text-red-500 dark:hover:text-red-300"
                          >
                            <i className="fa-solid fa-times mr-1"></i>取消订单
                          </button>
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          
          {/* 分页 */}
          {filteredOrders.length > 0 && (
            <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
              <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                <div>
                  <p className="text-sm text-gray-700 dark:text-gray-300">
                    显示 <span className="font-medium">{indexOfFirstItem + 1}</span> 到 <span className="font-medium">{Math.min(indexOfLastItem, filteredOrders.length)}</span> 条，共 <span className="font-medium">{filteredOrders.length}</span> 条记录
                  </p>
                </div>
                <div>
                  <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                    <button
                      onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
                      disabled={currentPage === 1}
                      className={`relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 ${
                        currentPage === 1 ? 'opacity-50 cursor-not-allowed' : ''
                      }`}
                    >
                      <span className="sr-only">上一页</span>
                      <i className="fa-solid fa-chevron-left text-xs"></i>
                    </button>
                    
                    {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                      // 简单的分页逻辑，显示当前页附近的页码
                      let pageNum;
                      if (totalPages <= 5) {
                        pageNum = i + 1;
                      } else if (currentPage <= 3) {
                        pageNum = i + 1;
                      } else if (currentPage >= totalPages - 2) {
                        pageNum = totalPages - 4 + i;
                      } else {
                        pageNum = currentPage - 2 + i;
                      }
                      
                      return (
                        <button
                          key={pageNum}
                          onClick={() => setCurrentPage(pageNum)}
                          className={`relative inline-flex items-center px-4 py-2 border ${
                            currentPage === pageNum
                              ? 'bg-indigo-50 dark:bg-indigo-900/30 border-indigo-300 dark:border-indigo-700 text-indigo-700 dark:text-indigo-300'
                              : 'border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
                          } text-sm font-medium`}
                        >
                          {pageNum}
                        </button>
                      );
                    })}
                    
                    <button
                      onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
                      disabled={currentPage === totalPages}
                      className={`relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 ${
                        currentPage === totalPages ? 'opacity-50 cursor-not-allowed' : ''
                      }`}
                    >
                      <span className="sr-only">下一页</span>
                      <i className="fa-solid fa-chevron-right text-xs"></i>
                    </button>
                  </nav>
                </div>
              </div>
              
              {/* 移动端分页 */}
              <div className="flex items-center justify-between w-full sm:hidden">
                <p className="text-sm text-gray-700 dark:text-gray-300">
                  共 {filteredOrders.length} 条记录
                </p>
                <div className="flex space-x-2">
                  <button
                    onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
                    disabled={currentPage === 1}
                    className={`px-3 py-1 border rounded text-sm ${
                      currentPage === 1
                        ? 'border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed'
                        : 'border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
                    }`}
                  >
                    上一页
                  </button>
                  <button
                    onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
                    disabled={currentPage === totalPages}
                    className={`px-3 py-1 border rounded text-sm ${
                      currentPage === totalPages
                        ? 'border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed'
                        : 'border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
                    }`}
                  >
                    下一页
                  </button>
                </div>
              </div>
            </div>
          )}
          
          {/* 空状态 */}
          {filteredOrders.length === 0 && (
            <div className="px-6 py-12 text-center">
              <div className="inline-flex items-center justify-center p-6 rounded-full bg-gray-100 dark:bg-gray-700 mb-4">
                <i className="fa-solid fa-file-invoice text-3xl text-gray-400"></i>
              </div>
              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">暂无订单数据</h3>
              <p className="text-gray-500 dark:text-gray-400">
                当前筛选条件下没有找到符合的订单
              </p>
              <button
                onClick={() => {
                  setSelectedStatus('all');
                  setSearchQuery('');
                  setDateRange('all');
                }}
                className="mt-4 px-4 py-2 rounded-lg text-sm font-medium bg-indigo-600 dark:bg-indigo-500 text-white hover:bg-indigo-700 dark:hover:bg-indigo-600"
              >
                重置筛选条件
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}